//关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}
var loadingLayer=null;
function putb64(picBase){
    loadingLayer=layer.msg('图片上传中，请稍后', {
        icon: 16,
        shade: [0.8, '#393D49']
    });
    var qitoken="";
    $.ajax({
        url: '../upload/getToken',/*base64上传获取七牛token*/
        type: 'post',
        async: false,
        dataType: "json",
        success: function (data) {
                qitoken=data.token;
        }, error: function () {
            top.layer.msg("系统异常！", {icon: 2});
        }
    });

    //七牛云官方文档方法
    /*picUrl用来存储返回来的url*/
    var picUrl;
    /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
    picBase=picBase.substring(22);
    /*通过base64编码字符流计算文件流大小函数*/
    function fileSize(str) {
        var fileSize;
        if(str.indexOf('=')>0)  {
            var indexOf=str.indexOf('=');
            str=str.substring(0,indexOf);//把末尾的’=‘号去掉
        }
        fileSize=parseInt(str.length-(str.length/8)*2);
        return fileSize;
    }
    /*把字符串转换成json*/
    function strToJson(str) {
        var json = eval('(' + str + ')');
        return json;
    }
    //http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间，如果不是华南空间需要根据七牛云文档进行更改
    var url = "http://up.qiniu.com/putb64/"+fileSize(picBase);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4){
            var keyText=xhr.responseText;
            /*返回的key是字符串，需要装换成json*/
            keyText=strToJson(keyText);
            /* http://image.haoqiure.com/ 是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
            picUrl="http://lianmengyouxixcx.suchengkeji.cn/"+keyText.key;
            // console.log(picUrl);
            // $("#imgShowurl").val(picUrl)   //将图片链接显示在输入框去
            $(".url").show();
            $(".url").attr("src",picUrl);
            $(".url").val(picUrl);
            if(  $(".url").complete){
                layer.close(loadingLayer);
            }
        }
    }
    $('.url').load(function(){
        layer.close(loadingLayer);
    });

    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken "+qitoken+"");
    xhr.send(picBase);
}
layui.use(['form','layer','layedit','laydate','upload'],function(){
    var form = layui.form
    layer = parent.layer === undefined ? layui.layer : top.layer,
        laypage = layui.laypage,
        upload = layui.upload,
        layedit = layui.layedit,
        laydate = layui.laydate,
        $ = layui.jquery;
    var codeBase64Url=null;
    //执行实例
    var uploadInst = upload.render({
        elem: '#uploadimg' //绑定元素
        ,method: 'post'
        ,url: '../upload/uploadOneImg' //上传接口
        ,auto: false
        ,choose: function(obj){
            $(".tailoring-container").css('display','block');
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();

            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var replaceSrc = evt.target.result;
                    //更换cropper的图片
                    $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
                }
                reader.readAsDataURL(file);
            });
        },done: function(res){
            var index = layer.load(1); //换了种风格
            //上传完毕回调
            if (res.code == 0) {
                layer.close(index);
                top.layer.msg("上传成功",{icon: 6});
                $(".url").show();
                $(".url").attr("src",res.data.src);
                $(".url").val(res.data.src);

            }else {
                layer.close(index);
                top.layer.msg("上传失败",{icon: 5});
            }
        }
        ,error: function(){
            //请求异常回调
            top.layer.msg("系统繁忙,请稍后再试",{icon: 5});
        }
    });
    //cropper图片裁剪
    $('#tailoringImg').cropper({
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 1,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true,  //是否允许移动剪裁框
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        minCropBoxWidth:750,
        minCropBoxHeight:300,
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });
    //旋转
    $(".cropper-rotate-btn").on("click",function () {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click",function () {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click",function () {
        if(flagX){
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        }else{
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            codeBase64Url=base64url;
            putb64(base64url);
            closeTailor();
        }
    });

    //执行实例
    var uploadInst2 = upload.render({
        elem: '#uploadCode' //绑定元素
        ,method: 'post'
        ,url: '../upload/uploadOneImg' //上传接口
        ,done: function(res){
            var index = layer.load(1); //换了种风格
            //上传完毕回调
            if (res.code == 0) {
                layer.close(index);
                top.layer.msg("上传成功",{icon: 6});
                $(".appId").show();
                $(".appId").attr("src",res.data.src);
                $(".appId").val(res.data.src);

            }else {
                layer.close(index);
                top.layer.msg("上传失败",{icon: 5});
            }
        }
        ,error: function(){
            //请求异常回调
            top.layer.msg("系统繁忙,请稍后再试",{icon: 5});
        }
    });
    form.on('select', function(data){
      if(data.value==2||data.value==3){
          $("#appIdDiv").show();
          $("#erweimaDiv").hide();
      }else if(data.value==1){
          $("#appIdDiv").hide();
          $("#erweimaDiv").show();
      }else{
          $("#appIdDiv").hide();
          $("#erweimaDiv").hide();
      }
    });
    form.on("submit(sub)",function(data){
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
        var appId="";
        if(data.field.gameType==1){
            appId=$(".appId").attr("src");
        }else{
            appId=$(".appId").val();
        }
        $.ajax({
            url: '../banner/saveBanner',
            type: 'post',
            async: false,
            data: {
                id:data.field.id,
                gameName:data.field.gameName,
                gameType:data.field.gameType,
                pagePath:data.field.pagePath,
                url:appId,
                img:$(".url").attr("src")
            },
            dataType: "json",
            success: function (res) {
                if (res.code == 200){
                    top.layer.close(index);
                    top.layer.msg("操作成功！",{icon: 6});
                    parent.location.reload();
                }else {
                    top.layer.msg(res.msg,{icon: 5});
                }
            }, error: function () {
                top.layer.msg("系统异常！", {icon: 6});
                top.layer.close(index);
            }
        });
        return false;
    });

});